<template>
  <!-- 徒弟信息 -->
  <div>
    <div class="apprentice">
      <div class="tip">徒弟信息</div>
      <div class="Info">
        <div
          class="listone"
          v-for="(item, index) in staffTeacherPupilList"
          :key="index"
        >
          <div class="top">
            <div class="imgbox">
              <img :src="item.avatarAddress" v-if="item.avatarAddress" />
            </div>
            <div class="right">
              <div>
                {{ `姓名：${item.realName}  好评率${item.praiseRate}%` }}
              </div>
              <div>{{ `手机号：${item.phone}` }}</div>
              <div>{{ `员工编号：${item.staffCode}` }}</div>
            </div>
          </div>
          <div class="bottom">
            <span @click="goToTuDiDetail(item.staffCode)">查看徒弟详情</span>
            <span
              style="margin-left:30px;"
              @click="deletePeopleDialog(index, item.staffCode)"
              >解除师徒关系</span
            >
          </div>
        </div>
        <div class="addBox" @click="addPeopleDailog">
          <div class="boxcenter" style="text-align:center;">
            <i class="el-icon-plus"></i>
            <div>添加徒弟</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加徒弟" :visible.sync="dialogAdd">
      <el-input
        v-model="staffCode"
        autocomplete="off"
        placeholder="输入员工编码"
      ></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd = false">取 消</el-button>
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="addPeople"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="解除师徒关系" :visible.sync="dialogdetele">
      <div>确定要解除师徒关系吗？</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogdetele = false">取 消</el-button>
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="deletePeople"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    teacherPupil1: {
      required: false
    }
  },
  data() {
    return {
      dialogAdd: false,
      dialogdetele: false,
      staffTeacherPupilList: [], // 徒弟列表
      staffCode: "", // 添加的徒弟code
      deleteIndex: "", //当前删除的徒弟index
      deteleStaffCode: "" //当前删除的徒弟的code
    };
  },
  methods: {
    addPeopleDailog() {
      this.dialogAdd = true;
    },
    deletePeopleDialog(index, staffCode) {
      this.deleteIndex = index;
      this.deteleStaffCode = staffCode;
      this.dialogdetele = true;
    },
    async addPeople() {
      // 添加徒弟的校验
      if (!this.staffCode) {
        this.$message.error("请先填写员工编码");
        return false;
      }
      if (this.staffCode === this.$route.query.staffCode) {
        // 校验填写的徒弟的code码是是本人的
        this.$message.error("不能添加本人为徒弟");
        return false;
      }
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchStaffDetail",
        method: "get",
        params: {
          staffCode: this.staffCode
        }
      })
        .then(res => {
          const staffCode = this.staffCode;
          const { staffBasicVo } = res;
          const { realName, praiseRate, phone, avatarAddress } = staffBasicVo;
          this.staffTeacherPupilList.push({
            avatarAddress,
            realName,
            praiseRate,
            phone,
            staffCode
          });
          this.dialogAdd = false;
          this.staffCode = "";
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    async deletePeople() {
      this.staffTeacherPupilList.splice(this.deleteIndex, 1); // 页面直接删除
      this.dialogdetele = false;
    },
    sendMsg() {
      // 向父组件发送信息
      const staffTeacherPupilList = this.staffTeacherPupilList.map(item => {
        return {
          staffPupilCode: item.staffCode
        };
      });
      this.$emit("save", staffTeacherPupilList);
    },
    initData() {
      if (this.$route.query.staffCode) {
        // 师徒回显数据
        const pupilList = this.teacherPupil1.pupilList;
        this.staffTeacherPupilList = pupilList;
      }
    },
    goToTuDiDetail(tudistaffCode) {
      // 查看徒弟详情
      this.$router.push({
        path: "/newly",
        query: {
          staffCode: tudistaffCode
        }
      });
    }
  },
  watch: {
    staffTeacherPupilList: {
      handler() {
        this.sendMsg();
      },
      deep: true
    },
    teacherPupil1(newvalue) {
      if (newvalue) {
        this.initData();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.apprentice {
  background-color: #fff;
  border-top: 10px solid #ebeef1;
  .tip {
    font-size: 18px;
    font-weight: 900;
    padding-left: 20px;
    height: 60px;
    line-height: 60px;
  }
  .Info {
    display: flex;
    font-size: 14px;
    flex-wrap: wrap;
    margin: 0 20px;
    .listone {
      margin-right: 120px;
      margin-bottom: 20px;
      .top {
        display: flex;
        .imgbox {
          width: 80px;
          height: 80px;
          border: 7px solid #cccccc;
          border-radius: 5px;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          div {
            margin-bottom: 18px;
          }
        }
      }
      .bottom {
        color: #0099ff;
        span {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
    .addBox {
      color: #606266;
      width: 100px;
      height: 100px;
      border: 1px solid #dcdfe6;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 20px;
    }
  }
}
</style>
